iT邦幫忙

2024 iThome 鐵人賽

DAY 6
0

前幾天,ChatGPT主要安排了與設計基礎和使用者相關的學習內容。接下來,我將展開與wireframe相關的學習,相信搜尋過UI/UX設計的人一定會接觸到這部分。

那就,https://ithelp.ithome.com.tw/upload/images/20240817/201685997Ul3YBvTtS.png


UI設計流程

  在設計出一個符合邏輯與所需功能的wireframe之前,我們有幾件重要的事要做:
https://ithelp.ithome.com.tw/upload/images/20240817/20168599kXkX3tyzF5.jpg

  其中Flow chart和UI flow都是屬於操作邏輯流程 (Logic Flow)的一部分,但呈現方式不同:
https://ithelp.ithome.com.tw/upload/images/20240817/20168599YtGwom5nRy.jpg


線框稿(wireframe)

  從上面的敘述可以發現,在設計產品的早期過程中,wireframe只畫出必要元件,不包含視覺色彩的低保真度(low fidelity)設計,也因此會用簡單的灰階色調、方框、線條或符號,來表達排版架構,是團隊溝通的重要工具之一。
  範例如下:
https://ithelp.ithome.com.tw/upload/images/20240817/20168599mir8aiynfP.jpg


一些廢話

我覺得,火鍋就是一個四季都可以吃的好東西,要我每週都吃一次也可以,曾經最高紀錄一週吃三次

參考資料

  1. 讀者來信:UI 設計流程
  2. 嘿!你知道Flow chart跟UI flow的差別嗎?
  3. UI/UX專有名詞和工作流程
  4. 先別急著畫UI,你聽過Flow Chart嗎
  5. 【Wireframe是什麼】線框稿重點+線上工具!Wireframe範例

上一篇
DAY5#How to 設計?
下一篇
DAY7#使用Figma製作wireframe
系列文
UI/UX設計的初心者冒險之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言